<template>
  <el-descriptions :title="title" v-bind="labelProps" :direction="['vertical', 'horizontal'][labelProps.direction || 1]"
    :column="labelProps.column || 3" :border="labelProps.border" :labelClassName="labelProps.labelClassName || ''"
    :contentClassName="labelProps.contentClassName || ''" :size="labelProps.size || ''">
    <template #title>
      <slot name="title">
        <span>{{ title }}</span>
      </slot>
    </template>
    <el-descriptions-item :label="item.title" v-for="(item, index) in dataCloumns" :key="index">
      <slot :name="`C_${item.key}`" v-bind="{ key: item.key }">
        <span>{{ item.format ? item.format(item, data, item.key, data[item.key]) : data[item.key] }}</span>
      </slot>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script>
export default {
  name: 'label-item',
  props: {
    dataCloumns: { type: Array, default: () => [] },
    data: { type: Object, default: () => { } },
    labelProps: {
      type: Object,
      default: () => {
        return {
          column: 3,
          border: true,
          colon: true,
          direction: 1,
          labelClassName: '',
          contentClassName: '',
          size: '',
        }
      },
    },
    title: {
      type: String,
      default: '',
    },
  },
}
</script>

<style lang="scss" scoped></style>